<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TodoList</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 关于vue数据绑定，组件，实现todolist的小功能-->
		<div id="app">
			<input type="text" v-model="inputValue"/>
			<button @click="handleBtnClick" type="button">提交</button>
			<ul>
				<!-- 值从list->item->value -->
				<!-- 父传子用v-bind 可简写成： -->
				<todo-item :value="item" 
						   v-bind:index='index'
						   @delete='handleItemDelete'
						   v-for="(item,index) in list"></todo-item>
			</ul>
		</div>
		<script type="text/javascript">
		var TodoItem = {
			props:['value','index'],
			template:"<li @click='handleItemClick'>{{value}}</li>",
			methods:{
				handleItemClick: function(){
					//vm.$emit( event, arg ) //触发当前实例上的事件
					/* 子传父，通过监听 */
					this.$emit('delete',this.index);
				}			
			}
		}
			var app = new Vue({
				components:{
					TodoItem : TodoItem
					},
				el:'#app',
				data:{
					list:[],
					inputValue:''
				},
				methods:{
					handleBtnClick:function(){
						this.list.push(this.inputValue);
						this.inputValue = '';
					},
					handleItemDelete:function(index){
						this.list.splice(index,1);
						}
				}
			});
		</script>
	</body>
</html>
